<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
</div>

<div class="table_div">
  <div id="searchParam" >
    <div class="layui-form-item">
      
      <div class="layui-input-inline layui-form">
      	<select id="taxorgcodeInput">
		</select>
      </div>
      
      <div class="layui-input-inline">
        <input type="text" id="stationNameInput" class="layui-input"  autocomplete="off" placeholder="请输入加油站名称">
      </div>
	  <div class="layui-input-inline">
        <input type="text" id="yearMonthInput" class="layui-input"  autocomplete="off" placeholder="请输入年月">
      </div>
	  
      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <button class="layui-btn"   id="export">导出</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <p style="color:red">数据口径:</p>

</script>
<script type="text/html" id="tool">
  <!--
  <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
  -->
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  
  var laydate = layui.laydate;
  
  //初始当前 年月
  var currentDate = new Date();
  var currentYear = currentDate.getFullYear();
  var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
  var yearMonthInput;
  if(10 > currentMonth > 0){
	  yearMonthInput = currentYear + "0" + currentMonth;
	  $("#yearMonthInput").val(currentYear + "0" + currentMonth);
  }else{
	  yearMonthInput = currentYear + "" + currentMonth;
	  $("#yearMonthInput").val(currentYear + "" + currentMonth);
  }
  
  $(function() {
	  // 加载机关
      CoreUtil.sendGet("/sys/deptlist",null , function(res) {
			if (res.code == '0') {
				var value = res.data[0];
				var opt = "<option value = ''>请选择所属机关</option>";
				for (var i in value) {
					opt += '<option value = "' + value[i].id + '">'
							+ value[i].name + '</option>';
				}
				
				$("#taxorgcodeInput").html(opt);
				form.render('select'); //需要渲染一下
			} else {
				layer.msg(res.msg);
				return false;
			}
		}, false, false);
		
  });
  
  
  layui.use(['table', 'layer', 'laydate'], function () {
	  
	  laydate.render({
		    elem: '#yearMonthInput',
		    type: 'month', // 设置类型为年选择
		    format: 'yyyyMM', // 设置年月格式
		    trigger: 'click', // 设置触发方式
		  });
	  
	  laydate.render({
			elem : '#createTimeInput',
			type : 'date',
			range : '至',
			done : function(value, date, endDate) {
				if (value != null && value != undefined
						&& value != "") {
					startTime = value.split("至")[0];
					endTime = value.split("至")[1];
					
				} else {
					startTime = null;
					endTime = null;
				}

			}
		});
	  
    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/gas/collect/sell/list' //数据接口
      , where: {yearMonths: yearMonthInput} // 初始化时的过滤条件
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: '主键', sort: true, hide: true},
          
          {field: 'name', title: '油站名称', sort: true},
          {field: 'taxorgName', title: '分局名称', sort: true},
          {field: 'price', title: '销售金额', sort: true},
          {field: 'amount', title: '销售笔数', sort: true},
          
          /* {field: 'field1', title: 'field1', sort: true},
          {field: 'field2', title: 'field2', sort: true},
          {field: 'field3', title: 'field3', sort: true},
          {field: 'field4', title: 'field4', sort: true},
          {field: 'field5', title: 'field5', sort: true},
          {field: 'deleted', title: '是否删除(1未删除；0已删除)', sort: true},
          {field: 'createId', title: '创建人', sort: true},
          {field: 'updateId', title: '更新人', sort: true},
          {field: 'createWhere', title: '创建来源(1.web 2.android 3.ios )', sort: true},
          {field: 'createTime', title: '创建时间', sort: true},
          {field: 'updateTime', title: '', sort: true},
          {width: 120, toolbar: "#tool", title: '操作'} */
        ]
      ]
      , toolbar: '#toolbar'
    });
    
    //导出
    $('#export').on('click', function () {
    	//原先分页limit
      	var exportParams = {
        	limit: -1,
        	key: $("#key").val(),
    		yearMonths: $("#yearMonthInput").val(),
    		taxorgcode : $("#taxorgcodeInput").val(),
    		stationName : $("#stationNameInput").val()
    		
      	};
      	CoreUtil.sendPost("/gas/collect/sell/list", exportParams, function (res) {
        	//初始化渲染数据
        	if (res.data != null && res.data.records != null) {
          		table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        	}
      	});
    });

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });
  });

  //执行查询
  function search() {
	  // var createTimeInput = $("#createTimeInput").val();
	  // var arr = createTimeInput.split('至');
	  //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
    	// createTimeStart : arr[0],
		// createTimeEnd : arr[1],
		yearMonths: $("#yearMonthInput").val(),
		
		taxorgcode : $("#taxorgcodeInput").val(),
		stationName : $("#stationNameInput").val()
        
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
  
  
	function firstDayOfMonth() {
  		const currentDate = new Date();
  		const year = currentDate.getFullYear();//获取当前年
  		const month = String(currentDate.getMonth() + 1).padStart(2, "0");//获取当前月
  		const firstDay = "01";//日
  		return `${year}-${month}-${firstDay}`;
    };
	
    function lastDayOfMonth() {
    	// 获取当前日期
    	const currentDate = new Date();
    	// 获取当前年份
    	let year = currentDate.getFullYear();
    	// 获取下个月的月份，使用 padStart 在月份小于 10 时在前面补零
    	let month = String(currentDate.getMonth() + 2).padStart(2, "0");
    	// 如果月份为 '13'，说明当前是12月，需要更新年份并将月份设置为 '01'
    	if (month === '13') {
    	    year = year + 1;
    	    month = '01';
    	}
    	 
   	  	// 设置每个月的第一天为 '01'
   	  	let firstDay = "01";
   	  	// 构建下个月的第一天的日期字符串，格式为 'YYYY-MM-DD'
   	  	const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;
   	  	// 计算当前月的最后一天，通过减去一天的毫秒数来得到
   	  	const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);
   	  	// 将最后一天的日期转换为 ISO 格式，并提取日期部分
   	  	return lastDayOfMonth.toISOString().split("T")[0];
	}
    
    
    
</script>